var SearchForm = function () {
  var template = /* html */ `
    <div class="search-form" v-loading.fullscreen.lock="loading">
      <el-form inline label-width="auto">
        <el-form-item label="设备型号">
          <el-input v-model="search.machineModel" class="search-input"></el-input>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-input v-model="search.machineSerialNo" class="search-input"></el-input>
        </el-form-item>
        <el-form-item label="位置">
          <el-cascader clearable filterable v-model="search.address" class="search-input" :options="addressList" separator="-"
            :props="addressProps"></el-cascader>
        </el-form-item>
        <el-form-item label="客户">
          <el-input v-model="search.buyer" class="search-input"></el-input>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-select clearable v-model="search.status" class="search-input">
            <el-option v-for="status in statusList" :key="'status_'+status.value" :value="status.value"
              :label="status.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="警报类型">
          <sys-autocomplete v-model="search.typeName" class="search-input" :options="alarmTypeList"></sys-autocomplete>
        </el-form-item>
        <el-form-item label="物联网卡编号">
          <el-input v-model="search.internetThingsCard" class="search-input"></el-input>
        </el-form-item>
        <el-form-item label="出厂日期">
          <el-date-picker clearable v-model="search.outTimeStart" class="search-input" value-format="timestamp" :editable="false"
            :picker-options="startDateOption"></el-date-picker>
          <span>-</span>
          <el-date-picker clearable v-model="search.outTimeEnd" class="search-input" value-format="timestamp" :editable="false"
            :picker-options="endDateOption"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否绑定物联网卡" label-width="125px">
          <el-select clearable v-model="search.hasInternetThingsCard" class="search-input">
            <el-option :value="1" label="是"></el-option>
            <el-option :value="0" label="否"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  `;

  return {
    mixins: [
      datePickerOptionsMixin('outTimeStart', 'outTimeEnd')
    ],

    props: {
      search: {
        type: Object,
        required: true
      },

      dropdownOption: {
        type: Object,
        defualt: function () {
          return {};
        }
      }
    },

    data: function () {
      return {
        loading: false,
        statusList: i18n.getDropDown('machineRepair.repairMgr.status', [1, 0]),
        alarmTypeList: [],
        addressList: [],
        addressProps: {
          checkStrictly: true,
          value: 'code',
          label: 'name'
        }
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setAlarmTypeList(),
        this.setAddressList()
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setAlarmTypeList: function () {
        var dropdownOption = this.dropdownOption;
        var alarmTypeList = dropdownOption.alarmTypeList;
        if (alarmTypeList !== undefined) {
          this.alarmTypeList = alarmTypeList;
          return Promise.resolve(alarmTypeList);
        }

        var self = this;
        return ajaxRequest('workOrder/getEquimentAlarmTypeName').then(function (alarmTypeList) {
          self.alarmTypeList = alarmTypeList;
          dropdownOption.alarmTypeList = alarmTypeList;
          return alarmTypeList;
        });
      },

      setAddressList: function () {
        var dropdownOption = this.dropdownOption;
        var addressList = dropdownOption.addressList;
        if (addressList !== undefined) {
          this.addressList = addressList;
          return Promise.resolve(addressList);
        }

        var self = this;
        return ajaxRequest('workOrder/getDistrict').then(function (addressList) {
          var addressObj = {};
          var addressCodeMap = {};
          for (var i = 0; i < addressList.length; i++) {
            var address = addressList[i];
            addressObj[address.id] = address;
            addressCodeMap[address.code] = address.name;
          }

          var addresses = [];
          for (var id in addressObj) {
            var address = addressObj[id];
            var parentId = address.parentId;
            var parentObj = addressObj[parentId];
            if (parentObj === undefined) {
              addresses.push(address);
              continue;
            }

            var children = parentObj.children;
            if (children === undefined) {
              children = [];
              parentObj.children = children;
            }
            children.push(address);
          }
          self.addressList = addresses;
          dropdownOption.addressList = addresses;
          dropdownOption.addressCodeMap = addressCodeMap;

          return addresses;
        });
      }
    },

    components: {
      SysAutocomplete: SysAutocomplete
    },

    template: template
  };
}();
